<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>评论</title>
    <script src="/jquery-3.3.1.min.js"></script>
</head>

<body>

    <h1>评论</h1>
    <form action="/comment/post" method="post">
        <input type="hidden" name="nickName" value="bmatch">
        <input type="hidden" name="songId" value="35847388" />
        <input name="conTent" type="text" style="width: 100%; height: 100px;" placeholder="填写你的评论" />
        <br />
        <button type="submit">评论</button>

    </form>

    <h3>精彩评论</h3>
    <ul th:each="comment:${comments}">
        <li>
            <img th:src="${comment.icon}" />
            <span th:text="${comment.nickName}"></span>
            <span th:utext="${comment.conTent}"></span>
        </li>

        <li>
            <label>评论时间</label>
            <span th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd HH:mm:ss')}"></span>
        <label>点赞数:</label>
        <a href="#" th:data-id="${comment.id}" class="like-btn">
            <span th:text="${comment.likeNum}"></span></a>



    </li>
</ul>

<script>
    $(function () {
        $(".like-btn").on("click", function (e) {
            e.preventDefault();
            //阻止浏览器默认行为
            var self = $(this);
            var commentId = self.data("id");
            $.ajax({
                url: "/comment/like",
                method: "POST",
                data: {
                    songId: "35847388",
                    commentId: commentId
                },

                cache: false
                //阻止浏览器缓存
            })
                .done(function (data) {
                    self.html(data.likeNum);

                });
        });
    });

</script>


</body>
</html>